<!DOCTYPE html>
<html>
<body>
  <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
  <script src="vue3-sfc-loader.js"></script>
  <script>

    /* <!-- */
    const config = {
      files: {
        '/circle0.svg': `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>`,
        '/circle1.svg': `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" /></svg>`,
        '/main.vue': `
          <template>
            <mycomponent
              :name="'circle' + index % 2"
            />
          </template>
          <script>
            import mycomponent from './myComponent.vue'
            import { ref } from 'vue'

            export default {
              components: {
                mycomponent
              },
              setup() {
                
                const index = ref(0);
                setInterval(() => index.value++, 1000);

                return {
                  index,
                }
              },
            }
          </script>
        `,
        '/myComponent.vue': `
          <template>
            <span v-html="svg" />
          </template>
          <script>

            import { ref, watch } from 'vue'

            class test {

            }

            console.log(test)

            function asyncToRef(callback) {

              const val = ref();
              watch(() => callback(), promise => promise.then(value => val.value = value), { immediate: true });
              return val;
            }

            export default {
              props: {
                name: String
              },
              setup(props) {


                return {
                  svg: asyncToRef(() => import('./' + (props.name ?? '') + '.svg')),
                }
              }
            }

          </script>
        `
      }
    };
    /* --> */

    const options = {
      moduleCache: { vue: Vue },
      getFile: url => config.files[url],
      addStyle(textContent) {

        const style = Object.assign(document.createElement('style'), { textContent });
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
      handleModule: async function (type, getContentData, path, options) { 
        switch (type) { 
          case '.svg':
            return getContentData(false);
        } 
      },
      log(type, ...args) {
        console[type](...args);
      }
    }

    Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('/main.vue', options))).mount(document.body);

  </script>
</body>
</html>

<!--
  

<!DOCTYPE html>
<html>
<body>
  <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
  <script src="vue3-sfc-loader.js"></script>
  <script>

    const options = {
      moduleCache: { vue: Vue },
      getFile: () => `<template>Hello World !</template>`,
      addStyle: () => {},
    }

    Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('file.vue', options))).mount(document.body);

  </script>
</body>
</html>

-->